<template>
  <view>
    <uni-nav-bar>
		<view class="maskerBox">
			 <uni-search-bar class="search" cancelText="" placeholder="请输入书名" :radius="100"></uni-search-bar>
			 <view class="masker" @click="search"></view>
		</view>
      <view @click="getCategory" class="cateBtn">分类</view>
    </uni-nav-bar>
   <view class="content">
   	        <view style="margin-top: 20upx;" class="tabsBox">
   	             <zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" class="tabs">
   	             </zzx-tabs>
				 <uni-icons type="arrowdown" size="20" @click="toChannel"></uni-icons>
   	        </view> 
   	        <view style="margin-top: 20upx;color:#999999;font-size: 24upx;height: 260upx;">
   	            <view v-show="current===i" v-for="(item,i) in items" :key="i">
   					选项卡{{item}}内容
   	            </view>
   	        </view>
   	    </view>
   </view>
  </view>
</template>

<script>
import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
export default {
  data() {
    	return {
    		items: ['精选','男频','女频','免费','热读','新书','完本'],
    		current: 0,
    		id: '',
    		sortName: '',
    };
  },
  components: {
    zzxTabs
  },
  created() {
	  // uni.request({
	  // 	url: 'http://localhost:8001/classify/secondClassify/' + this.id,
	  // 	method:'get',
	  // 	success(res) {
	  // 		console.log(res)
	  // 	}
	  // })
	  
  },
  onReady() {
    
  },
  methods: {
    search() {
      uni.navigateTo({
      	url:"/pages/bookshop/search/search"
      })
    },
    getCategory() {
      uni.navigateTo({
        url: "classify/classify"
      });
    },
	onClickItem(e) {
		console.log(e)
	  if (this.current !== e.currentIndex) {
	      this.current = e.currentIndex;
	  }
	},
	back() {
		uni.navigateBack()
	},
    toChannel() {
		uni.navigateTo({
			url:'/pages/bookshop/channel/channel'
		})
	}
  },
  
};
</script>

<style>
.search {
  width: 600rpx;
}
.cateBtn {
  width: 100rpx;
}
.img {
		width: 20%;
		height: 200rpx;
	}
	cover-image {
		display: block;
		width: 100%;
		height: 100%;
	}
	.textBox {
		display: inline-block;
		width: 75%;
		height: 200rpx;
	}
	.bookListBox {
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		 justify-content: space-between;
	}
	.title {
		color: #000000;
		font-size: 18px;
	}
	.author {
		font-size: 12px;
		color: #666;
	}
	.description {
		margin-top: 10px;
		height: 100rpx;
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.tabs {
		width: 95%;
	}
	.tabsBox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.maskerBox {
		position: relative;
	}
	.masker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0);
	}
</style>
